<!--
 * @Author: your name
 * @Date: 2021-07-21 11:29:36
 * @LastEditTime: 2021-08-27 15:46:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/matchDetail.vue
-->
<template>
  <view :class="['match-wrap',(currentChoose < matchStepList.length && currentActive <= matchStepList.length - 1) ? 'add-bottom' : '']">
    <!-- 顶部赛制列表 -->
    <header-step v-if="matchStepList.length" @changeChoose="changeChoose" :list="matchStepList" :active="currentActive" :currentChoose="currentChoose"></header-step>
    <template v-if="!pageFlag">
      <!-- 分组数据 -->
      <group-list v-if="groupList.length" :groupList="groupList" :currentGroup="currentGroup" @getMatchList="getMatchList"></group-list>
      <!-- 循环淘汰赛、循环赛排名 -->
      <ranking-list v-if="rankingList.length" :userData="userInfo" :groupList="groupList" :rankingList="rankingList" :rankShowAll="rankShowAll" :sportEventId="sportEventId" :active="currentActive" :currentChoose="currentChoose" @getMatchList="getMatchList" @showToogle="showToogle" @rankChooseWin="rankChooseWin"></ranking-list>
      <!-- 赛事列表 -->
      <match-list v-if="matchList.length" :userData="userInfo" :matchList="matchList" :list="matchStepList" :currentScheduleType="currentScheduleType" :sportEventId="sportEventId" @showToogle="showToogle" :matchShowChoose="matchShowChoose" @recordScore="recordScore" :active="currentActive" :currentChoose="currentChoose"></match-list>
      <!-- 总排名 -->
      <total-ranking v-if="currentChoose >= matchStepList.length && matchStepList.length" :userData="userInfo" :list="totalRankingList"></total-ranking>
    </template>
    <!-- 列表无数据loading -->
    <view class="list-loading"
          v-if="pageFlag">
      <van-loading size="30px"
                    vertical>加载中...</van-loading>
    </view>
  </view>
</template>

<script>
import headerStep from './components/headerStep.vue'
import rankingList from './components/rankingList.vue'
import matchList from './components/matchList.vue'
import groupList from './components/groupList.vue'
import totalRanking from './components/totalRanking.vue'
import { mapState, mapMutations } from 'vuex'
import { setTimeout } from 'timers';
export default {
  components: {
    headerStep,
    rankingList,
    matchList,
    groupList,
    totalRanking
  },
  data () {
    return {
      // 赛制列表
      matchStepList: [],
      // 当前进行中下标
      currentActive: 10,
      // 当前选中下标
      currentChoose: 3,
      // 分组列表
      groupList: [],
      // 当前选中分组id
      currentGroupId: '',
      // 循环赛排名
      rankingList:[],
      // 当前所选分组数
      currentGroup: 0,
      // 循环赛列表展开开关
      rankShowAll: false,
      // 当前选中赛程id
      scheduleId: '',
      // 当前选中赛程类型 20循环，30s淘汰
      currentScheduleType: '',
      // 赛事列表
      matchList: [],
      // 当前选中场次展开
      matchShowChoose: [],
      // 判断是否可以进行下一轮
      beginFlag: false,
      // 当前活动id
      actId: '1418779608574332928',
      // 保存开关
      saveFlag: true,
      // 只有录分返回用
      recordFlag: false,
      // 总排名
      totalRankingList: [],
      // 冠亚军弹层
      chooseWrapFlag: false,
      // 冠亚军
      chooseGradeActive: '',
      // 冠亚军列表
      gradeList: [],
      // 冠亚军对应列表id
      eventTeamId: '',
      // 晋级开关
      gradeFlag: false,
      // 页面开关
      pageFlag: true
    }
  },
  onLoad (options) {
    if (options) {
      this.actId = options.actId
    }
    this.getMatchStepList()
  },
  onShow () {
  },
  computed: {
    ...mapState(['accessToken', 'sportName', 'sportEventId', 'userInfo'])
  },
  methods: {
    // 获取赛制列表 只针对循环淘汰赛的第一步需要分组和排名信息
    async getMatchStepList () {
      const params = {
        "ACCESS-TOKEN": this.accessToken,
        actId: this.actId
      }
      const res = await this.$api.getRankStepList(params)
      if (res && res.code == 200) {
        const list = res.data.filter((itme, index) => {
          return index < res.data.length - 1
        })
        this.matchStepList = list
        const isDoing = res.data.filter(item => {
          return item.status == 1
        })
        // 活动已结束或者进行中
        if (isDoing.length) {
          const check = res.data.forEach((item, index) => {
            if (item.status == 1) {
              this.currentActive = index
              // this.currentActive = 6
              this.currentChoose = index
              this.scheduleId = item.id
              this.currentScheduleType = item.systemType
              // 总决赛获取排名信息
              if (index >= list.length) {
                this.getTotalRanking()
              }
              // 只针对于循环淘汰赛第一步获取分组信息
              if (index == 0 && this.sportEventId == 10) {
                this.getGroupList()
                return
              }
              this.getMatchList()
            }
          })
        } else {
          // 活动未开始
          this.currentActive = -1
          // this.currentActive = 6
          this.currentChoose = 0
          this.scheduleId = res.data[0].id
          this.currentScheduleType = res.data[0].systemType
          // 只针对于循环淘汰赛第一步获取分组信息
          if (this.sportEventId == 10) {
            this.getGroupList()
            return
          }
          this.getMatchList()
        }
      }
    },
    // 获取总排名
    async getTotalRanking () {
      const res = await this.$api.getTotalRanking({"ACCESS-TOKEN": this.accessToken,actId: this.actId})
      if (res && res.code == 200) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        this.totalRankingList = res.data
      }
    },
    // 获取分组列表
    async getGroupList () {
      const params = {
        "ACCESS-TOKEN": this.accessToken,
        actId: this.actId
      }
      const res = await this.$api.getGroupList(params)
      if (res && res.code === 200) {
        this.groupList = res.data
        this.currentGroupId = res.data[0].id
        this.getMatchList (0, this.groupList[0].id)
      }
    },
    // 点击赛程列表修改当前选中（循环赛获取分组，排名，场次列表。淘汰赛获取场次列表）
    changeChoose(item, index) {
      // if (index == this.currentChoose) return
      // 当总决赛未结束时不能点击
      if (index == this.matchStepList.length && this.currentActive <=this.matchStepList.length - 1) return
      this.pageFlag = true
      this.currentChoose = index
      this.scheduleId = item.id
      this.currentScheduleType = item.systemType
      this.groupList = []
      this.rankingList = []
      this.matchShowChoose = []
      if (this.sportEventId == '10' && index == 0) {
        this.getGroupList()
        return
      }
      this.currentGroupId = ''
      this.getMatchList()
    },
    // 1.切换组,通过组获取排名,场次列表 淘汰赛获取场次列表。2.页面初始化，在获取分组列表调用。 3.页面返回，获取场次列表
    async getMatchList (index, id) {
      this.currentGroup = index || ''
      this.currentGroupId = id || ''
      this.rankShowAll = false
      const params = {
        "ACCESS-TOKEN": this.accessToken,
        actId: this.actId,
        groupsId: this.currentGroupId,
        scheduleId: this.scheduleId
      }
      this.matchList = []
      this.matchShowChoose = []
      const sessionsRes = await this.$api.getSessionsList(params)
      if ( sessionsRes && sessionsRes.code == 200) {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
        const list = sessionsRes.data
        let result = []
        let repeatList = []
        list.forEach(item => {
          list.forEach(second => {
            let arr = []
            if (item.eventGames === second.eventGames && item.sort != second.sort && !repeatList.includes(item.eventGames)) {
              repeatList.push(item.eventGames)
              arr.push(item, second)
              result.push(arr)
            }
          })
        })
        this.matchList = result
        // 获取排名
        if (this.currentScheduleType == '20') {
          this.getRankingList()
        }
        this.$nextTick(() => {
        this.pageFlag = false
      })
        return
      }
      this.$nextTick(() => {
        this.pageFlag = false
      })
    },
    // 获取排名列表
    async getRankingList () {
      const params = {
        "ACCESS-TOKEN": this.accessToken,
        actId: this.actId,
        groupsId: this.currentGroupId,
        scheduleId: this.scheduleId
      }
      const scoreRes = await this.$api.getGroupScoreList(params)
      if (scoreRes && scoreRes.code == 200) {
        this.rankingList = scoreRes.data
      }
    },
    // 展开收起切换 name: rank循环赛排名列表 match比分
    showToogle (name, eventGames) {
      if (name === 'rank') {
        this.rankShowAll = !this.rankShowAll
        return
      }
      if (name === 'match') {
        let index = this.matchShowChoose.indexOf(eventGames)
        if (index > -1) {
          this.matchShowChoose.splice(index, 1)
          return
        }
        this.matchShowChoose.push(eventGames)
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.match-wrap {
  min-height: 100vh;
  background: #f2f2f2;
  box-sizing: border-box;
  padding-top: 160rpx;
  overflow: hidden;
  &.add-bottom {
    padding-bottom: 128rpx;
  }
  .choose-grade {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    position: fixed;
    top: 0;
    left:0;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    .grade-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, .6);
    }
    .grade-content {
      width: 650rpx;
      height: 378rpx;
      border-radius: 15rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 8;
      position: relative;
      .title {
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #333;
        margin-top: 60rpx;
        margin-bottom: 52rpx;
      }
      .list {
          width: 100%;
          margin-bottom: 60rpx;
          display: flex;
          justify-content:space-around;
          align-items: center;
          padding: 0 105rpx;
          box-sizing: border-box;
          text {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-self: center;
            font-size: 30rpx;
            line-height: 88rpx;
            color: #333;
            border: 5rpx solid #E9E9E9;
            &.active {
              border: 5rpx solid #4490FF;
              color: #4490FF;
            }
          }
        }
        .confirm {
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          font-size: 32rpx;
          color: #999;
          border-top: 1px solid #e9e9e9;
        }
        .close {
          position: absolute;
          right: 30rpx;
          top: 30rpx;
          color: #ccc;
        }
    }
  }
  .list-loading {
      width: 750rpx;
      display: flex;
      justify-content: center;
      position: relative;
      padding-top: 200rpx;
    }
}
</style>